<template>
  <div>
    <el-dialog :title="applyTitle" :visible.sync="applyOpen" width="45%" style="margin-top:8%" append-to-body :before-close="closeDelDialog">
      <el-form ref="applyForm" :model="applyForm" label-width="100px">
        <el-form-item label="模块名称" prop="menuName">
          <el-select multiple collapse-tags v-model='selectedArray' @change='changeSelect' placeholder='请选择' filterable style="width: 100%">

          <!--
          <el-select v-model="applyForm.menuName" multiple placeholder="请选择" style="width: 100%" filterable>
-->
            <el-checkbox-button v-model="checked" @change='selectAll' size="mini" style="float:right;margin-right: 20px">全选</el-checkbox-button>

            <el-option v-for="item in applyOption" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitApply">保 存</el-button>
        <el-button @click="closeDelDialog">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {addApply, listAllMenu, copyApply,getApply} from "@/api/archive/archivesCategory";
export default {
  props: ["applyOpen", "applyTitle"],
  name: "applicationDefinition",
  data() {
    return {
      //应用定义表单参数
      applyForm: {},
      // 应用定义菜单下拉框
      applyOption: [],
      val: "",
      categoryModelId: "",
      form: {},
      selectedArray: [],
      checked: false,


    }
  },
  methods: {
    init(val, categoryModelId) {
      console.log(val,categoryModelId,"skdljfsdklfjsdklfjklsdfjklsdjfsdklfjsdkljf")
      this.val = val;
      console.log(this.val)
      if (val.length > 0) {
        // 复制到
          this.form.clonedmenuId = val
          this.form.categoryId = categoryModelId
      } else {
        // 新增
        this.form.categoryId = categoryModelId
      }
      this.getApplyMenu()
    },
    // 应用定义获取当前立档单位所有菜单
    getApplyMenu() {
      if(this.val.length > 0){ //复制到
        getApply({
          categoryId: this.form.categoryId,
          pageNum:1,
          pageSize: 10000
        }).then(response => {
          var arrList= response.rows.filter(res=>{
          return res.MENU_ID!=this.val
        })
        this.applyOption = arrList.map(option => {
          return {
            value: option.MENU_ID,
            label: option.MENU_NAME
          }
        })
      });
      }else{ //添加
        listAllMenu({
          categoryId:this.form.categoryId
        }).then(response => {
        this.applyOption = response.rows.map(option => {
          return {
            value: option.MENU_ID,
            label: option.MENU_NAME
          }
        })
      })

      }

    },
    // 应用定义弹窗确定
    submitApply() {
      this.$refs["applyForm"].validate((valid) => {
          if (valid) {
            const clonetomenuIds = this.selectedArray
            if(clonetomenuIds.length>0){
              if(this.val.length > 0 ){
                console.log(1213)
                this.form.clonetomenuIds = clonetomenuIds.toString()
                console.log(this.form)
                copyApply(this.form).then(response => {
                  this.$modal.msgSuccess("复制成功");
                  this.reset()
                  this.$emit("submitApply")
                });
              } else {
                this.form.menuIds = clonetomenuIds.toString()
                console.log(this.form)
                addApply(this.form).then(response => {
                  this.$modal.msgSuccess("新增成功");
                  this.reset()
                  this.$emit("submitApply")
                })
              }
            } else {
              this.$message({ message: '请选择至少一个模块', type: 'warning' })
            }
          }
      })
    },
    // 应用定义弹窗取消
    closeDelDialog() {
      this.$emit("applyCancel")
      this.reset()
    },
    changeSelect(val) {
      console.log(val,"---------------------")
      // console.log(val,this.applyOption)
      // if (val.length === this.applyOption.length) {
      //   this.checked = true
      // } else {
      //   this.checked = false
      // }
    },
    selectAll() {
      this.selectedArray = []
      if (this.checked) {
        this.applyOption.map((item) => {
          this.selectedArray.push(item.value)
        })
      } else {
        this.selectedArray = []
      }
    },
    // 清空表单
    reset() {
      this.selectedArray = []
    },
  },
}
</script>

<style scoped>

</style>
